<template>
  <view style="height: 100vh;background-color: #f2f1f1;padding-top: 40px;">
    <view class="" style="position: fixed;top: 0;left: 0;width: 100%;z-index: 999;">
      <u-tabs
        :list="list"
        :is-scroll="false"
        inactive-color="#ADADAA"
        active-color="#C3B27F"
        :bar-style="{ backgroundColor: '#C3B27F' }"
        :current="current"
        @change="change"
      ></u-tabs>
    </view>
    <!-- 这个是全部订单 -->
    <!-- <allOrdersList v-show="current == 0" ref="allOrders" :num="current"></allOrders>
    <obligation v-show="current == 1" ref="obligation" :num="current"></obligation>
    <shipped v-show="current == 2" :num="current"></shipped>
    <yifahuo v-show="current == 3" :num="current"></yifahuo> -->
    <view class="" style="background-color: #f2f1f1;">
      <view @click="deltis(item)" class="box" v-for="(item, index) in ordersList" :key="index">
        <view class="box_top">
          <view class="box_top_left">订单号：{{ item.order_sn }}</view>
          <view class="box_top_right">{{ item.status_name }}</view>
        </view>
        <!-- 图片位置 -->
        <view class="picture" v-for="(ite, ind) in item.item" :key="index">
          <view class="" style="margin-right: 50rpx;"><image :src="ite.goods_image" style="width: 200rpx;height: 200rpx;" mode=""></image></view>
          <view class="" style="margin-right: 60rpx;width: 350rpx;">
            <view class="picture_top">{{ ite.goods_title }}</view>
            <view class="picture_top_t">{{ ite.goods_sku[1] }}</view>
            <view class="picture_bottom_b">{{ ite.colorName }}</view>
            <view class="picture_bottom">￥{{ ite.goods_price }}</view>
          </view>
          <!--  -->
          <view class="num">×{{ ite.goods_num }}</view>
        </view>
        <!-- 下方的 -->
        <view class="freight" style="text-align: right;margin-top: 40rpx;color: #999999;font-size: 28rpx;">
          运费:￥{{ item.dispatch_amount }}
          <text style="color: #0A0A09;font-size: 28rpx;margin-left: 30rpx;">付款金额:￥{{ item.total_fee }}</text>
        </view>
        <!-- 按钮 -->
        <view class="btn">
          <!-- 左边的 -->
          <view class="left" @click.stop="cancellationOrder(item)" v-show="item.status_name == '待付款'">取消订单</view>
          <view class="left" @click.stop="delOrder(item)" v-show="item.status_name == '已取消' || item.status_name == '交易关闭'">删除订单</view>
          <!-- 右边的 -->
          <view class="right" @click="deltis(item)" v-show="item.status_name != '待付款'">查看详情</view>
          <view class="right" style="color: #ff0000;border: 2rpx solid #ff0000;" @click.stop="jixu(item)" v-show="item.status_name == '待付款'">立即付款</view>
          <!-- <view class="right">查看详情</view> -->
        </view>
      </view>
    </view>
    <view class="" style="font-size: 32rpx;font-weight: 600;margin-top: 50%;margin-left: 50%;transform: translateX(-15%); color: #888;" v-show="this.ordersList.length == 0">
      暂无订单
    </view>
  </view>
</template>

<script>
import { orderIndex, cancel, orderDelete } from '@/api/api.js';
// import allOrders from '@/pages/my/orderList/allOrders.vue';
// import shipped from '@/pages/my/orderList/shipped.vue'; //待发货
// import yifahuo from '@/pages/my/orderList/yifahuo.vue'; //已发货
// import obligation from '@/pages/my/orderList/obligation.vue'; //待付款
export default {
  // components: {
  //   allOrders,
  //   obligation,
  //   yifahuo,
  //   shipped
  // },

  data() {
    return {
      ordersList: [],
      list: [
        {
          name: '全部订单'
        },
        {
          name: '待付款'
        },
        {
          name: '待发货'
        },
        {
          name: '已发货'
        }
        // {
        //   name: '售后'
        // }
      ],
      current: 0,
      page: 1,
      state: 'all'
    };
  },
  watch: {
    current(newValue, oldValue) {
      this.ordersList = [];
      this.page = 1;
      if (newValue == 0) {
        this.state = 'all';
        this.init('all');
      } else if (newValue == 1) {
        this.state = 'nopay';
        this.init('nopay');
      } else if (newValue == 2) {
        this.state = 'nosend';
        this.init('nosend');
      } else if (newValue == 3) {
        this.state = 'noget';
        this.init('noget');
      }
      // else if (newValue == 4) {
      //   this.state = 'all';
      //   this.initShow('all');
      // }
    }
  },
  onShow() {
    this.init(this.state);
  },
  onReachBottom() {
    if (this.ordersList.length < this.page * 10) return;
    this.page++;
    this.init(this.state);
  },
  methods: {
    // 点击继续付款
    async jixu(item) {
      // 微信支付
      let res = await this.$api.prepay({
        order_sn: item.order_sn,
        payment: 'wechat'
        // return_url: '/pages/payResult/payResult'
      });
      if (res.code == 1) {
        wx.requestPayment({
          //成功之后，调用小程序微信支付
          timeStamp: res.data.pay_data.timeStamp,
          nonceStr: res.data.pay_data.nonceStr,
          package: res.data.pay_data.package,
          signType: 'MD5',
          paySign: res.data.pay_data.paySign,
          success: res => {
            //支付成功的回调
            // console.log('支付成功', JSON.stringify(res));
            // this.show = true;
            uni.navigateTo({
              url: '/pages/payResult/payResult'
            });
          },
          fail: () => {
            // uni.showToast({
            //   icon: 'none',
            //   title: '支付失败'
            // });
          }
        });
      }
    },
    // 点击删除订单
    // async orderDelete(item) {
    async delOrder(item) {
      let n = await uni.showModal({
        title: '提示',
        content: '确认删除订单吗？'
      });
      if (n[1].cancel) return;
      if (n[1].confirm) {
        let n = await orderDelete({ id: item.id });
        this.init(this.state);
        if (n.code == 1) {
          setTimeout(() => {
            this.$msg(n.msg);
          }, 500);
        }
      }
    },
    // 点击取消订单
    async cancellationOrder(item) {
      let n = await uni.showModal({
        title: '提示',
        content: '确认取消订单吗？'
      });
      if (n[1].cancel) return;
      if (n[1].confirm) {
        let n = await cancel({ id: item.id });

        this.init(this.state);
        setTimeout(() => {
          this.$msg('取消成功');
        }, 1000);
      }
    },
    change(index) {
      this.current = index;
    },
    async init(data) {
      let n = await this.$api.orderIndex({ type: data, page: this.page });
      // this.ordersList = n.data.data;
      if (this.page != 1) {
        this.ordersList = [...this.ordersList, ...n.data.data];
        this.ordersList.forEach(item => {
          item.item.forEach(ite => {
            let color = ite.goods_sku_text.split('#');
            let col = '#' + color[1];
            ite.color = col;
            ite.colorName = color[0];
          });
        });
      } else {
        this.ordersList = n.data.data;
        this.ordersList.forEach(item => {
          item.item.forEach(ite => {
            let color = ite.goods_sku_text.split('#');
            let col = '#' + color[1];
            ite.color = col;
            ite.colorName = color[0];
          });
        });
      }
    },
    async initShow(data) {
      let n = await this.$api.orderIndex({ type: data, page: this.page });
      let list = n.data.data;
      let newList = [];
      list.forEach(item => {
        item.item.forEach(ite => {
          if (ite.status_name == '售后中') {
            // ite.orderID = item.id;
            newList.push(item);
          }
        });
      });
      this.ordersList = newList;
      // this.ordersList = n.data.data;
      // if (this.page != 1) {
      //   this.ordersList = [...this.ordersList, ...n.data.data];
      // } else {
      //   this.ordersList = n.data.data;
      // }
    },
    // 点击跳转详情
    deltis(item) {
      uni.navigateTo({
        url: '/pages/my/orderList/orderDetails/orderDetails?id=' + item.id
      });
    }
  }
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
.btn {
  position: relative;
  // text-align: right;
  height: 100rpx;
  margin-top: 40rpx;
  // display: flex;
  .left {
    position: absolute;
    right: 230rpx;
    top: 0rpx;
    width: 192rpx;
    height: 76rpx;
    line-height: 76rpx;
    text-align: center;
    border: 2rpx solid #adadaa;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #adadaa;
  }
  .right {
    position: absolute;
    right: 0rpx;
    top: 0rpx;
    width: 192rpx;
    height: 76rpx;
    line-height: 76rpx;
    text-align: center;
    border: 2rpx solid #296d8a;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #296d8a;
  }
}
.box {
  padding: 20rpx;
  // width: 700rpx;
  // height: 552rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  .box_top {
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    .box_top_left {
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #5c5a55;
    }
    .box_top_right {
      font-size: 24rpx;
      color: #ff0000;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      // color: #5c5a55;
    }
  }
  .picture {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #f2f1f1;
    .picture_top {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      // font-weight: bold;
      color: #0a0a09;
    }
    .picture_top_t {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      margin-top: 20rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #5c5a55;
    }
    .picture_bottom_b {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      margin-top: 10rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #5c5a55;
    }
    .picture_bottom {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      margin-top: 20rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #e83241;
    }
    .num {
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #cccccc;
    }
  }
}
</style>
